<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <title>Template with HTMLImports Test</title>
    <script src="../webcomponents-loader.js"></script>
    <script src="./wct-config.js"></script>
    <script src="../node_modules/wct-browser-legacy/browser.js"></script>
  </head>
<body>

    <template>
      <x-child></x-child>
    </template>

    <template id="before"></template>
    <x-after></x-after>

    <script>
      var created = [];
      var attached = [];
      var childCreated = false;
      var foundTemplate = false;

      class XChild extends HTMLElement {
        constructor() {
          super();
          this.custom = true;
          childCreated = true;
        }
      }

      class XAfter extends HTMLElement {
        constructor() {
          super();
          this.custom = true;

          var template = document.querySelector('#before');
          if (template && template.content) {
            foundTemplate = true;
          }
        }
      }

      window.customElements.define('x-child', XChild);
      window.customElements.define('x-after', XAfter);

      suite('template and custom elements', function() {
        test('elements within templates not upgraded', function() {
          assert(!childCreated);
        });

        test('templates before elements are bootstrapped before createdCallback', function() {
          assert.equal(foundTemplate, true);
        });
      });

      suite('Template', function() {
        var template;
        suiteSetup(function() {
          template = document.querySelector('template');
        });

        var canInnerHTML = (function() {
          var el = document.createElement('div');
          try {
            Object.defineProperty(el, 'innerHTML', {
              get: function(){},
              set: function(){}
            });
            return true;
          } catch(e) {
            return false;
          }
        })();

        function setupTemplate(template, string) {
          if (canInnerHTML) {
            template.innerHTML = string;
          } else {
            var el = document.createElement('div');
            el.innerHTML = string;
            var nodes = Array.prototype.slice.call(el.childNodes, 0);
            for (var i = 0; i < nodes.length; i++) {
              template.content.appendChild(nodes[i]);
            }
          }
        }

        test('clone', function() {
          var imp = document.createElement('template');
          var s = '<div>Hi</div>';
          setupTemplate(imp, s);
          var clone = imp.cloneNode();
          assert.notEqual(clone, imp, 'element is not cloned');
          assert.isDefined(clone.content, 'cloned template content dne');
          assert.equal(clone.content.childNodes.length, 0,
              'non-deep cloned template.content is not empty');
          var deepClone = imp.cloneNode(true);
          assert.equal(deepClone.content.childNodes.length, 1,
              'deep cloned template.content is empty');
          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
              'cloned content is not different from source');
        });

        test('clone nested', function() {
          var imp = document.createElement('template');
          var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
          setupTemplate(imp, s);
          var clone = imp.cloneNode(false);
          assert.notEqual(clone, imp, 'element is not cloned');
          assert.isDefined(clone.content, 'cloned template content dne');
          assert.equal(clone.content.childNodes.length, 0,
              'non-deep cloned template.content is not empty');
          var deepClone = imp.cloneNode(true);
          assert.equal(deepClone.content.childNodes.length, 2,
              'deep cloned template.content is empty');
          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
              'cloned content is not different from source');
          var nested = deepClone.content.lastChild;
          assert.isDefined(nested.content, 'nested cloned template content dne');
          assert.equal(nested.content.childNodes.length, 2,
              'deep cloned template.content is empty');
          nested = nested.content.lastChild;
          assert.isDefined(nested, 'nested cloned template content dne');
          assert.equal(nested.content.childNodes.length, 2,
              'deep cloned template.content is empty');
          nested = nested.content.lastChild;
          assert.isDefined(nested, 'nested cloned template content dne');
          assert.equal(nested.content.childNodes.length, 1,
              'deep cloned template.content is empty');
        });

        test('clone node containing templates', function() {
          var imp = document.createElement('div');
          var t = document.createElement('template');
          var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
          setupTemplate(t, s);
          imp.appendChild(t);
          var impClone = imp.cloneNode(true);
          imp = imp.firstChild;
          var deepClone = impClone.firstChild;
          assert.equal(deepClone.content.childNodes.length, 2,
              'deep cloned template.content is empty');
          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
              'cloned content is not different from source');
          var nested = deepClone.content.lastChild;
          assert.isDefined(nested.content, 'nested cloned template content dne');
          assert.equal(nested.content.childNodes.length, 2,
              'deep cloned template.content is empty');
          nested = nested.content.lastChild;
          assert.isDefined(nested, 'nested cloned template content dne');
          assert.equal(nested.content.childNodes.length, 2,
              'deep cloned template.content is empty');
          nested = nested.content.lastChild;
          assert.isDefined(nested, 'nested cloned template content dne');
          assert.equal(nested.content.childNodes.length, 1,
              'deep cloned template.content is empty');
        });

      });
    </script>
  </body>
</html>
